<template>
  <div id="invoice">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="invoice_details">
      <div>
        <p class="details_text">{{data.status==0 ? "待开票" : "已开票"}}</p>
        <h6 class="details_t">收件信息</h6>
        <p class="details_text">
          电子邮件
          <span>{{data.buyerEmail}}</span>
        </p>
        <h6 class="details_t">发票信息</h6>
      </div>
      <div class="details_box">
        <p>
          <label>发票抬头</label>
          <span>{{data.buyerName}}</span>
        </p>
        <p v-show="IstaxNo">
          <label>纳税人识别号</label>
          <span>{{data.buyerTaxNo}}</span>
        </p>
        <p>
          <label>发票内容</label>
          <span>*运输服务*平安到家-出行服务</span>
        </p>
        <p>
          <label>发票金额</label>
          <span style="color:#FF6917">{{data.money}}元</span>
        </p>
        <p>
          <label>申请时间</label>
          <span>{{data.createDate}}</span>
        </p>
        <p>
          <label>发票类型</label>
          <span>{{data.makeType}}</span>
        </p>
      </div>
      <p class="details_more" @click="tripList">
        {{data.orderNum}}个行程
        <span>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <h6 class="lx">联系我们：010-53916713</h6>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Radio, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '开票详情',
      data: '',
      cover: false,
      IstaxNo: true,
      IsTopbar: true
    };
  },
  mounted() {
    this.getInvoiceDetail();
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  },
  methods: {
    // 获取发票详情
    getInvoiceDetail() {
      var param = {
        invoice_id: this.$route.query.invoiceId
      };
      Loading.show();
      http.post('pakj/invoice/getInvoiceDetail', param).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.data = res.data.data;
          if (res.data.data.type === '1') {
            this.IstaxNo = false;
          }
          this.data.createDate = moment(res.data.data.createDate).format('YYYY-MM-DD HH:mm');
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    tripList() {
      this.$router.push({
        name: 'invoicetripList',
        query: {
          invoiceId: this.$route.query.invoiceId
        }
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#invoice {
  height: 100vh;
  background-color: color-primary-background;
}

.invoice_details {
  margin-top: 20px;
}

.details_text {
  padding-left: 30px;
  height: 88px;
  line-height: 88px;
  color: #333;
  background-color: #fff;
  font-size: 30px;
}

.details_text span {
  margin-left: 40px;
}

.details_t {
  padding-left: 30px;
  height: 80px;
  line-height: 80px;
  color: #666;
  font-size: 28px;
  font-weight: 400;
}

.details_box {
  background-color: #fff;
  padding: 0px 0px 20px 0px;
}

.details_box p {
  margin-left: 30px;
  margin-right: 30px;
  color: #333;
  padding-top: 20px;
}

.details_box label {
  width: 240px;
  display: inline-block;
  color: #999;
}

.details_box span {
  font-size: 30px;
  color: #333;
}

.details_more {
  padding-left: 30px;
  height: 88px;
  line-height: 88px;
  color: #666;
  margin-top: 20px;
  background-color: #fff;
  font-size: 30px;
  color: #333;
}

.details_more span {
  float: right;
  margin-right: 30px;
}

.details_more span img {
  width: 15px;
  height: 20px;
}

.lx {
  width: 100%;
  text-align: center;
  font-size: 22px;
  color: #999;
  position: fixed;
  bottom: 20px;
  font-weight: 400;
}
</style>
